<template>
    <el-card class="use-surplus">
        <div class="use-surplus-main">
            <div class="title">
                企业画像查看&nbsp;
                <div class="num">
                    {{surplusNum}}
                </div>
                &nbsp;次
            </div>

            <template
            v-if="isLogin && !isHavingPower"
            >
                <el-button 
                size="medium" 
                v-if="surplusNum > 0" 
                @click="$emit('use')"
                >
                    立即使用
                </el-button>

                <el-button 
                size="medium" 
                v-if="surplusNum <= 0" 
                @click="showBuyDialog"
                >
                    购买即使用
                </el-button>
            </template>

            <el-button 
            size="medium" 
            v-if="!isLogin" 
            @click="showLoginDialog"
            >
                登录
            </el-button>
        </div>

        <dialog-product 
            v-model="dialogVisible" 
            :projectids="statisticId" 
            @close="$emit('afterBuy')"
        ></dialog-product>
    </el-card>
</template>

<script>
import { mapGetters } from 'vuex';

import DialogProduct from '@/pages/user/center/components/dialog-product.vue';

export default {
    components: {
        DialogProduct,
    },
    props: {
        isHavingPower: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isLogin: false,

            dialogVisible: false,
        };
    },
    computed: {
        ...mapGetters({
            statisticData: 'userinfo/getStatisticData',
        }),
        companyGuid: function () {
            return this.getQuery('guid');
        },
        companyName: function () {
            return this.getQuery('company');
        },
        surplusNum() {
            var statisticData = this.statisticData || [];

            let arr = statisticData.filter((item) => item.name == '企业画像');

            if (arr.length > 0) {
                return arr[0].surplus;
                // return 0
            } else {
                return 0;
            }
        },
        statisticId() {
            var statisticData = this.statisticData || [];

            let arr = statisticData.filter((item) => item.name == '企业画像');

            if (arr.length > 0) {
                return arr[0].rowguid;
            } else {
                return '';
            }
        },
    },
    methods: {
        showLoginDialog() {
            this.$store.dispatch('global-dialog/showLogin');
        },
        showBuyDialog() {
            this.dialogVisible = true;
        },
        //判断是否登录，登录正常显示，未登录就显示遮罩部分
        checkLogin(){
            this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                login: () => {
                    this.isLogin = true;
                },
                noLogin: () =>{
                    this.isLogin = false;
                }, 
            })
        },
    },
    created() {
        this.checkLogin();
    },
}
</script>

<style lang="scss" scoped>
    .use-surplus {
        margin-top: 8px;

        .use-surplus-main {
            display: flex;
            width: 100%;

            .title {
                font-size: 14px;
                display: flex;
                align-items: baseline;

                .num {
                    font-size: 20px;
                    color: #527aff;
                }
            }

            .el-button {
                margin-left: 52px;
                width: 116px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ff9f3b;
                color: #fff;
            }
        }
    }
</style>